<template>
  <div class="chartList">
    <!-- <h2>我是 chartList 市场数据子组件</h2> -->
    <!-- 头部区域 -->
    <div class="chartTop">
      <div class="title">市场数据</div>
      <div class="chartmore" @click="gotoChart">
        <span>查看更多</span>
        <i class="iconfont iconicon_more"></i>
      </div>
    </div>
    <!-- 城市 职业显示块 -->
    <div class="showCity">
      <span class="showe">{{ charList.city }}</span>
      <span class="showe">{{ charList.position }}</span>
    </div>
    <!-- 多条数据条展示 -->
    <div class="lineList">
      <!-- 单条数据条展示 -->
      <div class="oneline" v-for="(item, index) in defaultList" :key="index">
        <!-- 左 -->
        <span>{{ item.year }}</span>
        <!-- 中 -->
        <div class="without">
          <div
            class="inside"
            :style="{ width: (item.salary / charList.topSalary) * 100 + '%' }"
          >
            ¥{{ item.salary }}
          </div>
        </div>
        <!-- 右 -->
        <div class="textIcons">
          <i
            class="iconfont iconicon_shangsheng"
            :class="{ red: item.percent < 0, green: item.percent > 0 }"
            v-if="item.percent > 0 || item.percent < 0"
          ></i>
          <i v-else></i>
          <span class="textspan">{{ item.percent }}</span>
          <span v-if="item.percent">%</span>
        </div>
      </div>
    </div>

    <!-- 底部折叠按钮部分 -->
    <div class="more" @click="totalbutton">
      <span>{{
        defaultList === charList.yearSalary ? '收起更多' : '显示更多'
      }}</span>
      <!-- icon图标无法旋转 使用自定义样式 -->
      <i
        class="iconfont iconicon_zhankai"
        v-if="defaultList !== charList.yearSalary"
      ></i>
      <i class="iconfont icon-shangjiantou" v-else></i>
    </div>
  </div>
</template>

<script>
import '@/style/chart-top.css'
import { topChartData } from '@/api/api.js'
export default {
  data () {
    return {
      defaultList: [], // 拿来默认显示的数据
      charList: {} // 数据热门统计数据
    }
  },
  async created () {
    const res = await topChartData()
    // 对数组反向排序,因为显示的年份需要倒叙
    res.data.yearSalary.reverse()
    // 数据保存
    this.charList = res.data
    // 默认展示四条数据, slice
    this.defaultList = res.data.yearSalary.slice(0, 4)
  },
  methods: {
    // 跳转到数据页面
    gotoChart () {
      this.$router.push('/chart')
    },
    totalbutton () {
      if (this.defaultList !== this.charList.yearSalary) {
        this.defaultList = this.charList.yearSalary
      } else {
        this.defaultList = this.charList.yearSalary.slice(0, 4)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.chartList {
  padding: 15px;
  padding-top: 0px;
  // 头部样式
  .chartTop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 64px;
    .title {
      font-size: 18px;
      color: #000;
    }
    .chartmore {
      span {
        font-size: 14px;
        color: #545671;
      }
    }
  }
  // 长沙 职业 span 样式
  .showCity {
    .showe {
      display: inline-block;
      background-color: #eceaea;
      color: #808194;
      padding: 8px;
      margin-right: 8px;
      font-size: 14px;
      border-radius: 5px;
    }
  }
  // 数据条样式
  // 多
  .lineList {
    margin-top: 26px;
    // 单
    .oneline {
      display: flex;
      align-items: center;
      margin-bottom: 21px;
      // 左边文字
      span {
        color: #545671;
        font-size: 13.5px;
      }
      // 中间数据条
      // 外面 灰色 框
      .without {
        // flex: 1;
        width: 189px;
        background-color: #ebdfdf;
        height: 14px;
        border-radius: 10px;
        margin: 0 14px 0 12px;
        overflow: hidden;
        // 里面 橙色 框
        .inside {
          font-size: 12px;
          color: #fff;
          width: 90%;
          background-color: #fe6d67;
          height: 100%;
          padding-right: 5px;
          border-radius: 10px;
          text-align: right;
        }
      }
      // 右边箭头文字
      .textIcons {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        i {
          margin-right: 8px;
        }
        .red {
          color: #fe6d67;
          transform: rotate(180deg);
        }
        .green {
          color: #60d183;
        }
        .some {
          color: #ffffff;
        }
        .textspan {
          text-align: right;
          color: #545671;
        }
      }
    }
  }

  // 底部更多按钮
  .more {
    text-align: center;
    span {
      font-size: 14px;
      color: #545671;
    }
    .iconfont {
      color: #b4b4bc;
      font-size: 13px;
      margin-left: 10px;
    }
    .icon-shangjiantou {
      font-size: 22px;
      font-weight: 500;
      line-height: 20px;
    }
  }
}
</style>
